import { Table, Tag, Space, Button } from 'antd'
import { connect } from 'dva';
import { useEffect } from 'react'
import { Link } from 'umi'

function EmployeeList({employee, dispatch}) {

    const data = employee

    useEffect(() => {
        dispatch({
            type: 'employee/getAll'
        })
    }, [])

    const columns = [
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
            render: text => <a>{text}</a>,
        },
        {
            title: 'Age',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: 'Address',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: 'Tags',
            key: 'tags',
            dataIndex: 'tags',
            render: tags => (
            <>
                {tags.map(tag => {
                let color = tag.length > 5 ? 'geekblue' : 'green';
                if (tag === 'loser') {
                    color = 'volcano';
                }
                return (
                    <Tag color={color} key={tag}>
                    {tag.toUpperCase()}
                    </Tag>
                );
                })}
            </>
            ),
        },
        {
            title: 'Action',
            key: 'action',
            render: (text, record) => (
                <Space size="middle">
                    <Button type="primary" onClick={() => {
                        editEmployee(text, record)
                    }}>
                        <Link to={"/employee/" + text.key}>编辑</Link>
                    </Button>
                    <Button type="primary" danger onClick={() => {
                        deleteEmployee(text, record)
                    }}>删除</Button>
                </Space>
            ),
        },
    ];

    const editEmployee = (text, record) => {
        console.log('editBtn')
    }

    function deleteEmployee(text, record) {
        dispatch({
            type: 'employee/deleteEmployee',
            payload: {
                key: text.key
            }
        })
    }


    return (
        <div>
            <h1>EmployeeList</h1>
            <Table columns={columns} dataSource={data} />
        </div>
    )
}

export default connect(({employee}) => ({employee}))(EmployeeList)